<template>
  <div v-cloak class="login-back">
    <el-row style="height:100%">
      <el-col class="el-col-box-left" :span="16">
          <img class="login-text-img" src="../assets/image/logo.png" alt="">
      </el-col>
      <el-col class="el-col-box-right" :span="8">
        <div class="login-title">
          <h1>欢迎登录</h1>
          <span></span>
        </div>
        <div class="login-pub">
          <span class="login-icon">
            <i class="icon-user-o element-icons"></i>
          </span>
          <input class="login-input" type="text" placeholder="用户名" v-model="account" maxlength="15">
        </div>
        <!-- <p class="yz-login">
          <span v-show="yzaccount">
            <i class="icon-cuowu element-icons"></i>{{yzaccount}}
          </span>
        </p> -->
        <!-- 密码 -->
        <div class="login-pub">
          <span class="login-icon">
            <i class="icon-mima element-icons"></i>
          </span>
          <input class="login-input" :type="iconClass == 'icon-yincang'?'password':'text'" placeholder="密码" v-model="password" maxlength="20">
          <span class="login-icon2">
            <i class="element-icons" :class="iconClass" @click="handleIcon"></i>
          </span>
        </div>
        <!-- <p class="yz-login">
          <span v-show="yzpassword">
            <i class="icon-cuowu element-icons"></i>{{yzpassword}}
          </span>
        </p> -->
        <!-- 验证码 -->
        <div class="login-pub" style="border-bottom: #48b3bc solid 3px;">
          <span class="login-icon">
            <i class="el-icon-key" style="color: #48b3bc"></i>
          </span>
          <input class="login-input login-input-color" type="text" placeholder="验证码" v-model="code" maxlength="20">
          <span class="login-icon2">
            <img id="verifyCodeImg" title="点击更新验证码" alt="" :src="imgsrc" @click="getCode();" style="cursor: pointer;">
          </span>
        </div>
        <p class="yz-login">
          <span v-show="yztext">
            <i class="icon-cuowu element-icons"></i>{{yztext}}
          </span>
        </p>
        <div class="login-btn" @click="login" v-loading="loading">登录</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      account: "",
      password: "",
      code: '',
      yzaccount: "",
      yzpassword: "",
      year: "",
      iconClass: 'icon-yincang',
      imgsrc: '/tx/verify_code',
      yztext: ''
    };
  },
  methods: {
    getCode() {
      console.log(this.$axios.api)
      var n = Math.random()
      this.imgsrc = this.$axios.api + '/tx/verify_code?T=' + n
    },
    handleIcon () {
      if (this.iconClass === 'icon-yincang') {
        this.iconClass = 'icon-xianshi'
      } else {
        this.iconClass = 'icon-yincang'
      }
    },
    login() {
      if (this.account === "") {
        this.yztext = "请输入账号";
        return false;
      } else {
        this.yztext = "";
      }
      if (this.password === "") {
        this.yztext = "请输入密码";
        return false;
      } else {
        this.yztext = "";
      }
      if (this.code === "") {
        this.yztext = "请输入验证码";
        return false;
      } else {
        this.yztext = "";
      }
      this.loading = true
      this.$axios.post('/tx/logon', {
      	account: this.account,
      	password: this.password,
        code: this.code
      })
      	.then((res) => {
      		if (res.code === 10200) {
            this.$router.push({
              name: "sorce_list"
            });
      		}
          setTimeout(() => {
            this.loading = false
          }, 200);
      	})
    }
  },
  created() {
    this.getCode()
  },
  watch: {
    account (value) {
      if (value) {
        this.yzaccount = ''
      }
    },
    password (value) {
      if (value) {
        this.yzpassword = ''
      }
    },
  }
};
</script>

<style>
.login-back {
  position: fixed;
  height: 100%;
  width: 100%;
  background: url(../assets/image/loginback.jpg) no-repeat;
  background-size: cover;
}
</style>